<template name="live_detail">
	<view>
		<view class="main overflow">
			<view class="live-bg">
				<view class="bg filter">
					<image v-if="detail" :src="detail.thumb" mode="aspectFill"></image>
					<image v-else :src="CLOUDPATH+'/gsc/livebg4.jpg'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="live-video">
				<livePlayer ref="livePlayer" style="width: 100%;height:100%;"></livePlayer>
			</view>

			<swiper class="controller-swiper" v-if="isPlaying && doPlay" current="1">
				<swiper-item>
					<view class="swiper-item">
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item relative">
						<view class="comment-view">
							<view class="comment-box">
								<TIMComment ref="TIMComment" v-on:memberChange="memberChange" v-on:customElem="customElem"></TIMComment>
							</view>
							<view class="w100 flex justify-start margin-bottom" v-if="curProduct">
								<view class="product-box">
									<view class="flex bg-white radius padding-sm margin-left">
										<view class="cu-avatar bg-white lg flex-sub">
											<image :src="curProduct.product.picture" mode="aspectFill"></image>
										</view>
										<view class="w100 text-left margin-left">
											<view class="text-black text-overflow-2">{{curProduct.product.name}}</view>
											<view class="text-gray margin-top-xs text-sm" v-if="curProduct.top">最高：<text class="text-orange">{{curProduct.top.interval}}积分</text></view>
											<view class="text-gray margin-top-xs text-sm" v-else>起拍价：<text class="text-orange">{{curProduct.min_interval}}积分</text></view>
										</view>

										<block v-if="curProduct.win_member_id > 0">
											<text class="cu-tag sm ">已完成</text>
										</block>
										<block v-else>
											<view class="cu-btn bg-pink sm round flex-sub" @tap="auctionModal=true" style="min-width: 100rpx;">
												出价
											</view>
										</block>
									</view>
								</view>
							</view>
							<view class="auction-view">
								<block v-for="(item,index) in auctionPayList" :key="index">
									<view class="margin-bottom radius bg-white" :class="index==0?'':'opacity'">
										<view class="bg-orange padding-xs text-center">
											{{item.interval}}积分
										</view>
										<view class="space-between padding-xs">
											<view class="text-overflow">{{item.member.nickname}}</view>
											<view class="text-orange text-right" v-if="index==0" style="min-width: 80rpx;">领先</view>
											<view class="text-gray text-right" v-else style="min-width: 80rpx;">出局</view>
										</view>
									</view>
								</block>
							</view>
						</view>
						<view class="ctr-bottom w100">
							<view class="flex padding align-center">
								<view class="flex-sub">
									<view class="cu-avatar bg-none" @tap="goProduct">
										<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/static/liveproduct.png"></image>
									</view>
								</view>
								<view class="flex-treble" @tap="goComment">
									<view class="bg-black-alight round padding-xs2 text-white margin-right">说点什么</view>
								</view>
								<view class="flex-sub gologbtn" @tap="goLog">
									<text class="bg-black-alight round padding-xs2 text-white cuIcon cuIcon-list default2"></text>
								</view>
								<view class="flex-sub" @tap="goGift">
									<text class="bg-black-alight round padding-xs2 text-white cuIcon cuIcon-present default2"></text>
								</view>
								<view class="flex-sub" @tap="showShare">
									<text class="bg-black-alight round padding-xs2 text-white cuIcon cuIcon-share default2"></text>
								</view>
								<view class="flex-sub" @tap="goBack">
									<text class="bg-black-alight round padding-xs2 text-white cuIcon cuIcon-close default2"></text>
								</view>
							</view>
						</view>

						<view class="ctr-header">
							<view class="space-between">
								<!-- #ifdef H5 -->
								<view class="teacher margin-left text-white round " :class="isapp==1?'margin-top-xl':''">
									<view class="cuIcon cuIcon-back margin-right solid-right" @tap="goBack"></view>
									<view class="cu-avatar round thumb">
										<image v-if="detail.member && detail.member.head_portrait" :src="detail.member.head_portrait" mode="aspectFill"></image>
									</view>
									<view class="info margin-left-sm padding-right-sm">
										<view class="text-white text-overflow" v-if="detail.member">{{detail.member.nickname}}</view>
										<view class="text-sm">{{clientList_length}}人观看</view>
									</view>
								</view>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<view class="teacher margin-left text-white round margin-top">
									<view class="cuIcon cuIcon-back margin-right solid-right" @tap="goBack"></view>
									<view class="cu-avatar round thumb">
										<image v-if="detail.lecturer_thumb" :src="detail.lecturer_thumb" mode="aspectFill"></image>
									</view>
									<view class="info margin-left-sm padding-right-sm">
										<view class="text-white text-overflow">{{detail.lecturer_name}}</view>
										<view class="text-sm">{{clientList_length}}人观看</view>
									</view>
								</view>
								<!-- #endif -->
							</view>
							<view class="btn-reward-modal margin-left text-white text-sm round padding-xs margin-top-sm padding-left-sm"
							 @tap="goRank">打赏榜<text class="cuIcon cuIcon-right sm"></text></view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="live-controller" v-if="isPlaying">
				<view class="playbtn bmg-center" v-if="isPlaying && !doPlay" @tap="playLive">
					<image :src="CLOUDPATH+'/college/btn-play.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="live-reward" v-if="isPlaying">
				<Reward ref="Reward" :id="id" v-on:pRewardChange="rewardChange"></Reward>
			</view>
		</view>

		<view class="cu-modal  " :class="auctionModal?'show':''" @tap="auctionModal = false">
			<view class="cu-dialog " @tap.stop="">
				<view class="bg-white overflow" v-if="curProduct">
					<view class="text-right margin">
						<view class="action text-gray" @tap="auctionModal = false">取消</view>
					</view>
					<view class="space-between solid-bottom padding-bottom-sm margin-lr">
						<view class="cu-avatar bg-white lg flex-sub">
							<image :src="curProduct.product.picture" mode="aspectFill"></image>
						</view>
						<view class="w100 text-left margin-left">
							<view class="text-black text-overflow-2">{{curProduct.product.name}}</view>
						</view>
					</view>
					<view class="cu-form-group">
						<view class="content">当前竞拍价</view>
						<view class="action text-orange" v-if="curProduct && curProduct.top">{{curProduct.top.interval}}积分</view>
						<view class="action text-orange" v-else>{{curProduct.min_interval}}积分</view>
					</view>
					<view class="cu-form-group">
						<view class="content">当前剩余积分</view>
						<view class="action text-orange">{{member.account.user_integral}}积分</view>
					</view>
					<view class="text-gray margin text-left">
						说明：出价总额需大于当前竞拍价。
						如出价后无人加价，则扣除对应积分后中标本产品。
					</view>
					<view class="margin-lr border1 padding-xs">
						<input placeholder="请输入价格" name="input" type="number" class="input-holder" v-model="auctionForm.interval"></input>
					</view>
					<view class="margin">
						<view class="cu-btn bg-blue w100 lg radius" @tap="auctionAddLog">确认出价</view>
						<view class="cu-btn line-blue w100 margin-top lg" @tap="goPage('/pages/member/interval/recharge')">积分充值</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal " :class="productModal?'show':''" @tap="productModal = false">
			<view class="cu-dialog product-view" @tap.stop="">
				<view class="padding bg-white " v-if="product">
					<block v-for="(item,index) in product">
						<view class="space-between solid-bottom padding-bottom-sm margin-bottom">
							<view class="cu-avatar xl bg-white">
								<image :src="item.product.picture" mode="aspectFill"></image>
							</view>
							<view class="w100 text-left margin-left">
								<view class="text-black text-overflow-2">{{item.product.name}}</view>

								<block v-if="item.win_member_id > 0">
									<view class="text-gray">得奖人：{{item.win_member_id}}</view>
									<view class="text-gray">竞拍积分：{{item.win_interval}}</view>
									<view class="text-gray">得奖时间：{{$common.timeFormat(item.win_time)}}</view>
								</block>
								<block v-else>
									<view class="text-gray margin-top-xs">起拍价：{{item.min_interval}}积分</view>
									<view class="text-right">
										<view class="cu-tag bg-blue light sm round">待竞拍</view>
									</view>
								</block>
							</view>
						</view>
					</block>
				</view>
				<view class="cu-load margin-center loading" v-else></view>
			</view>
		</view>

		<ShareView ref="ShareView"></ShareView>
	</view>
</template>
<script src="@/common/uni.webview.1.5.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//默认支持  
	document.addEventListener('plusready', function(r) {
		console.log("======plus ready==========");
		console.log(r)
		
	})
	initlister()

	function UniAppJSBridgeFunc() {
		document.querySelector('.gologbtn').addEventListener('click', function(evt) {
			console.log(222)
			//向uniapp传值
			uni.postMessage({
				data: {
					action: 'message'
				}
			});
		});
		if(window.plus){
			window.plus.webview.currentWebview().close()
		}
	}

	function initlister() {
		console.log(1231231)
		console.log(window.UniAppJSBridge)
		if (window.UniAppJSBridge) {
			console.log("======UniAppJSBridgeReady=======");
			UniAppJSBridgeFunc();
		} else {
			document.addEventListener('UniAppJSBridgeReady', function() {
				console.log("======UniAppJSBridgeReady=======");
				UniAppJSBridgeFunc();
			});
		}
	}
	import livePlayer from '@/components/default/livePlayer.vue'
	import TIMComment from '@/components/default/TimComment.vue'
	import ShareView from '@/components/default/ShareView.vue'
	import Reward from '@/components/default/auctionReward.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "auction_detail",
		components: {
			livePlayer,
			TIMComment,
			ShareView,
			Reward
		},
		computed: mapState(['forcedLogin', 'hasLogin']),
		mounted() {
			this.$nextTick(()=>{
				document.addEventListener('UniAppJSBridgeReady', function() {
					console.log("======UniAppJSBridgeReady=======");
					UniAppJSBridgeFunc();
				});
			})
		},
		data() {
			return {
				id: 0,
				isError: true,
				isPlaying: false,
				doPlay: false,
				videoError: '',
				systemError: '',
				roleError: '',
				detail: null,
				goods: null,
				cacheDetail: null,
				showEmg: false,
				clientList_length: 0,
				videoStream: '',
				p: '',
				modalName: "",
				role: false,
				member: null,
				timmer: null,
				tp: 0,
				tpError: false,
				goodsTipsStep: 0,
				outlinkStep: 0,
				CLOUDPATH: this.$config.cloudPath,
				videoContext: null,
				isapp: 0,

				//竞拍
				curProduct: null,
				product: null,
				productModal: false,
				auctionModal: false,
				auctionForm: {
					interval: 0,
				},
				auctionPayList: [],
			}
		},
		onLoad(options) {
			this.id = options.id
			if (!this.id) {
				this.$common.showError('参数有误', function() {
					uni.navigateBack({})
				})
				return
			}
			if (options.isapp) this.isapp = options.isapp
			if (this.timmer) clearInterval(this.timmer)

			this.cacheDetail = this.$common.getCache('live-detail')
			if (options.token) {
				this.login([options.token])
			}
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
					this.getDetail()
				})
			}
		},
		onShow() {
			// if (this.$common.loginAuth(true)) {
			// if (uni.getSystemInfoSync().platform == 'android') {
			// 	setTimeout((res) => {
			// 		this.$nextTick((r) => {
			// 			this.playLive()
			// 		})
			// 	}, 200)
			// }
			// }
		},
		onReady() {},
		onUnload() {},
		beforeDestroy() {
			this.quitTIM()
			if (this.timmer) clearInterval(this.timmer)
			uni.closeSocket({
				success: () => {
					console.log('关闭socket')
				}
			})
		},
		onHide() {
			this.doPlay = false
		},
		methods: {
			...mapMutations(['login', 'info']),
			playLive() {
				console.log(this.videoStream)


				if (this.videoStream) {
					this.$refs.livePlayer.playLive(this.videoStream)
				}
				this.doPlay = true
				this.loginIm()
			},
			loginIm() {
				this.$common.getMember().then((member) => {
					if (!this.$refs.TIMComment) {
						setTimeout((r) => {
							this.loginIm()
						}, 500)

						return
					}
					console.log(this.$refs.TIMComment)
					let inUser = {
						userId: 'member_' + member.id,
						name: member.nickname,
						thumb: member.head_portrait
					}
					this.$refs.TIMComment.join(inUser, this.detail.im.room_id, false)
				})
			},
			quitTIM() {
				if (this.$refs.TIMComment) {
					this.$refs.TIMComment.quit()
				}
			},
			showDetail() {
				console.log(this.detail)
				// this.isError = false
				// if (this.detail.stream_status == 0 && this.detail.play_url.trim() == '') {
				// 	this.videoError = "未开播，开播时间" + this.$common.timeFormat(this.detail.start_time)
				// } else {
				// 	if (this.detail.in_role == 0) {
				// 		this.roleError = '权限有误'
				// 	} else {

				if (this.detail.stream_status == 0) {
					this.videoStream = this.detail.play_url
					this.isPlaying = true
				} else if (this.detail.stream && this.detail.stream.hls) {
					this.videoStream = this.detail.stream.hls
					this.isPlaying = true
				} else {
					this.systemError = '直播有误，请稍后再试'
					return
				}

				// } else if (uni.getSystemInfoSync().platform == 'android') {
				// 	this.videoStream = this.detail.detail.stream_url.rtmp
				// } else {
				// 	this.videoStream = this.detail.detail.stream_url.rtmp
				// }
				console.log(this.videoStream)
				// this.playLive()
				// if (uni.getSystemInfoSync().platform == 'android') {
				// 	setTimeout((res) => {
				// 		this.$nextTick((r) => {
				// 			this.playLive()
				// 		})
				// 	}, 200)
				// }
				// 	}
				// }
			},
			getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.get('marketing_auction_view', {
						id: this.id,
						share_id: this.share_id
					})
					.then((response) => {
						uni.hideLoading()
						this.detail = response.data.data
						if (!this.detail.pay) {
							this.$common.showErrorModal('请购买后再进入')
							return
						}
						if (this.detail.select) {
							this.curProduct = this.detail.select
							if (this.detail.select.top) {
								this.auctionPayList.push(this.detail.select.top)
							}
						}
						this.$nextTick(()=>{
							initlister()
						})
						this.showDetail()
					})
					.catch((response) => {
						console.log(response)
						this.isError = true
						this.systemError = response.data.message
						uni.hideLoading()
					})
			},
			checkPlaying() {},
			goBack() {
				if (this.timmer) clearInterval(this.timmer)
				uni.redirectTo({
					url: "/pages/shop/marketing/auction/live?id=" + this.id
				})
			},
			goProduct() {
				this.productModal = true
				this.product = null
				this.$http
					.get('marketing_auction_product', {
						auction_id: this.id
					})
					.then((response) => {
						uni.hideLoading()
						this.product = response.data.data
					})
					.catch((response) => {})
			},
			goGift() {
				if (this.timmer) clearInterval(this.timmer)
				this.$refs.Reward.openModal('rewardModal')
			},
			goLog() {
				if (this.isapp == 1) {
					uni.postMessage({
						data: {
							action: 'message'
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/shop/marketing/auction/log?id=' + this.id
					})
				}
			},
			goRank() {
				if (this.timmer) clearInterval(this.timmer)
				this.$refs.Reward.openModal('rankModal')
			},
			goGoods() {
				this.$refs.liveGoodsView.openModal(this.goods)
			},
			goLink() {
				window.location.href = this.detail.link_url
			},
			goComment() {
				this.$refs.TIMComment.showCommon()
			},
			showShare() {
				if (this.detail) {
					this.$common.getMember().then((member) => {
						this.$refs.ShareView.show({
							type: 'auction',
							id: this.detail.id,
							thumb: this.detail.thumb,
							name: this.detail.name,
							share_url: this.detail.share_url,
							member_id: member.id,
							member_name: member.nickname,
							member_head: member.head_portrait,
							reget: true
						})
					})
				}
			},
			memberChange(e) {
				this.clientList_length = e
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				if (this.modalName == 'commonModal') {
					this.showEmg = false
					this.commentFocus = true
				}
			},
			hideModal(e) {
				this.modalName = null
			},

			//竞拍
			auctionAddLog() {
				if (!this.auctionForm.interval) {
					this.$common.showError('请输入正确的数量')
					return
				}
				if (this.member.account.user_integral - this.auctionForm.interval < 0) {
					this.$common.showError(this.auctionForm.interval + '剩余积分不足，请充值后再操作' + this.member.account.user_integral)
					return
				}
				if (this.member.account.user_integral < this.curProduct.interval) {
					this.$common.showError('出价数量必须大于最高价')
					return
				}
				uni.showLoading({
					title: '处理中...'
				})
				this.$http
					.post('marketing_auction_product_paylog', {
						id: this.curProduct.id,
						interval: parseInt(this.auctionForm.interval)
					})
					.then((response) => {
						uni.hideLoading()
						this.$common.showSuccess('出价成功')
						this.auctionModal = false
						this.$refs.TIMComment.sendCustomMsg('auction', '出价：' + this.auctionForm.interval + '积分', JSON.stringify({
								type: 'auctionProductPayTop',
								obj: response.data.data
							}))
							.then((r) => {}).catch((e) => {})
					})
					.catch((response) => {
						uni.hideLoading()
					})
			},
			rewardChange(data) {
				console.log(data)
				this.$refs.TIMComment.sendCustomMsg('auction', '打赏：' + data.money + '积分', JSON.stringify({
						type: 'auctionReward',
						obj: {}
					}))
					.then((r) => {}).catch((e) => {})
			},
			//自定义事件回调
			customElem(e) {
				if (e.data = 'auction' || e.data == "auctionProductPayTop") {
					var extension = JSON.parse(e.extension)
					let type = extension.type
					let obj = extension.obj
					if (type == 'auctionSelectProduct') { //选择商品
						this.curProduct = obj
						this.auctionPayList = []
						if (this.curProduct.top) this.auctionPayList.push(this.curProduct.top)
					} else if (type == "auctionProductPayTop") { //出价
						this.auctionPayList.unshift(obj)
						this.curProduct.top = obj
					} else if (type == "auctionDoneProduct") { //完成
						this.curProduct = obj
					}
				}
			},
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/collegePackages/pages/college/live?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.title,
				imageUrl: this.detail.thumb,
				path: path
			}
		},
	}
</script>

<style>
	@import "@/colorui/animation.css";

	.space-between {
		display: flex;
		justify-content: space-between;
	}

	.main {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}


	.live-bg,
	.live-roles,
	.live-video,
	.live-controller {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.live-bg {
		z-index: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 140%;
		left: -20%;
	}

	.live-roles {
		z-index: 10;
	}

	.live-video {
		z-index: 1;
	}

	.live-controller {
		z-index: 5;
	}

	.bmg-center {
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
	}


	.playbtn {
		position: absolute;
		left: 0;
		top: 0;
		/* background-color: rgb(0, 0, 0, 0.3); */
	}

	.playbtn image {
		width: 120rpx;
		height: 120rpx;
		cursor: pointer;
	}

	.live-bg .bg {
		width: 100%;
		height: 100%;
	}

	.live-bg .bg image {
		width: 100%;
		height: 100%;
	}

	.filter {
		background-color: #000000;
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-o-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
	}

	.live-roles .tips {
		background-color: rgb(0, 0, 0, 0.5);
		padding: 15rpx 30rpx;
		border-radius: 30rpx;
		line-height: 40rpx;
		font-size: 28rpx;
	}

	.ctr-header {
		overflow: hidden;
		align-items: center;
		position: absolute;
		left: 0;
		top: 20rpx;
		width: 100%;
	}

	.ctr-bottom {
		left: 0;
		bottom: 20rpx;
		position: absolute;
	}

	/* .comment-view {
		width: 60%;
		position: absolute;
		left: 30rpx;
		bottom: 80rpx;
	} */


	.btn-reward-modal {
		background-color: rgb(0, 0, 0, 0.3);
		display: inline-block;
	}

	.ctr-header .teacher {
		/* width: 300rpx;
		min-width: 300rpx; */
		/* height: 80rpx; */
		align-items: center;
		display: flex;
		justify-content: flex-start;
		background-color: rgb(0, 0, 0, 0.3);
		padding: 5rpx 20rpx;
	}

	.ctr-header .teacher .info {
		max-width: 200rpx;
		min-width: 80rpx;
	}

	.audience {
		width: 100%;
		margin-left: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 60rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.audience .count {
		/* width: 100rpx; */
		/* min-width: 100rpx; */
		background-color: rgb(0, 0, 0, 0.5);
		padding: 8rpx 10rpx;
		border-radius: 30rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.audience .list {
		/* width: 100%;
		margin-right: 10rpx;
		overflow: auto;
		height: 100%; */
	}

	.audience .list .cu-avatar {
		width: 60rpx;
		height: 60rpx;
		float: right;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.ctr-bottom .say {
		width: 240rpx;
		height: 80rpx;
		min-width: 240rpx;
		background-color: rgb(0, 0, 0, 0.5);
		line-height: 80rpx;
		padding-left: 34rpx;
		border-radius: 60rpx;
		margin: 0 20rpx;
	}


	.ctr-bottom .btns {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
	}

	.ctr-bottom .ctr-btn {
		width: 60rpx;
	}

	.ctr-bottom .ctr-btn image {
		width: 60rpx;
		height: 60rpx;
	}

	.ctr-bottom .btns .close {}

	.w50 {
		width: 50%;
	}

	.emg-view {
		height: 320rpx;
		overflow: hidden;
	}

	.emg-view swiper {
		height: 320rpx;
		overflow: hidden;
	}

	.emg-view .emg-item {
		height: 70rpx;
	}

	.emg-view .emg-item image {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx auto;
	}

	.emg-view .cu-list {
		background: none;
		overflow: hidden;
	}

	.level-ad {
		width: 100%;
	}

	.psdtips {
		background: none;
		position: relative;
	}

	.psdtips .btnss {
		position: absolute;
		bottom: 40rpx;
		width: 100%;
		padding: 0 20rpx;
	}

	.controller-swiper {
		position: absolute;
		width: 100%;
		bottom: 0;
		height: 100vh;
		left: 0;
		z-index: 98;
	}

	.controller-swiper .swiper-item {
		width: 100%;
		height: 100%;
	}

	.showgoods {
		width: 320rpx;
		height: 140rpx;
		right: 0rpx;
		top: -160rpx;
	}

	.showgoods .showgoods-ctr {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.showgoods .thumb {
		width: 100rpx !important;
		height: 100rpx !important;
		min-width: 100rpx !important;
	}

	.showgoods .title {
		height: 60rpx;
		line-height: 30rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
	}

	.showgoods-ctr:after {
		content: '';
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-top-color: #FFFFFF;
		position: absolute;
		bottom: -16px;
		right: 10px;
	}

	.outlink-view {
		width: 160rpx;
		height: 80rpx;
		overflow: hidden;
		position: absolute;
		left: 30rpx;
		bottom: 50%;
		display: flex;
		justify-content: flex-start;
	}

	.outlink-view image {
		height: 100%;
	}

	.ctr-btn.share {
		background: none;
		padding: 0;
		font-size: 12px;
		border: 0;
	}

	.ctr-btn.share::after {
		display: none;
	}

	.comment-view {
		width: 100%;
		bottom: 120rpx;
		position: absolute;
		display: flex;
		align-items: flex-end;
		flex-direction: column;
	}

	.comment-box {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.product-box {
		width: 60%;
	}

	.bg-black-alight {
		background-color: rgb(0, 0, 0, 0.7);
	}

	.padding-xs2 {
		padding: 14rpx;
	}

	.cuIcon.default2,
	.iconfont.default2 {
		font-size: 40rpx;
	}

	.product-view {
		height: 50vh;
		overflow: auto;
	}

	.border1 {
		border: 1px solid #CCC;
		border-radius: 5rpx;
		line-height: 40rpx;
	}

	.auction-view {
		width: 30%;
		height: 100%;
		overflow: auto;
		position: absolute;
		top: 0;
		right: 20rpx;
		padding-bottom: 40rpx;
	}

	.opacity {
		opacity: 0.5;
	}

	.live-player-video {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
	}

	.maxwh {
		width: 100%;
		height: 100%;
	}
</style>
